<template>
  <div id="swiper">
    <swiper :options="swiperOption" class="swiper" v-if='dataList.length>1&&isKeep'>  
　　    <swiper-slide v-for='(item,index) in dataList' :key='index' class="swiper-slide">
            <img :src="item[0]" alt="">
            <div class="imgT">{{item[1]}}</div>
            <div class="imgB">{{item[2]}}</div>
            <div class="price-area">
              <div class="price"><i>￥</i>{{item[3]}}</div>
              <div class="origin_price" v-if='item[4]'>{{item[4]}}</div>
              <div class="sell_price" v-if='item[5]'>立减<span>{{item[5]}}</span></div>
            </div>
        </swiper-slide>
　　    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 允许点击小圆点跳转
        //   dynamicBullets: true
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
        },
        loop: true
      },
      isKeep:false
    };
  },
  components: {},
  mounted() {
  },
  activated () {
    this.isKeep=true
  },
  deactivated () {
    this.isKeep=false
  }
}
</script>

<style scoped lang='less'>
#swiper {
  width: 160px;
  height: 110px;
  border-radius: 5px;
  overflow: hidden;
  .swiper{
      width: 100%;
      height: 100%;
      .swiper-slide{
            width: 100%;
            height: 90px;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
            .imgT,.imgB{
                position: absolute;
                color:#fff;
            }
            .imgT{
                top: 0;
                width: 54px;
                padding: 0 3px;
                font-size: 10px;
                background-color: rgba(51,51,51,.8);
                border-radius: 6px 0 6px 0;
            }
            .imgB{
                bottom: 0;
                width: 100%;
                height: 20px;
                padding: 0 10px;
                line-height: 20px;
                font-size: 11px;
                font-weight: 700;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .price-area{
              margin-top: -4px;
              width: 100%;
              height: 20px;
              line-height: 20px;
              i{
                font-style: normal;
                font-size: 11px;
              }
              .price{
                float: left;
                color:#f60;
                font-weight: 700;
                padding-right: 10px;
              }
              .origin_price{
                display: inline-block;
                color: #666;
                font-size: 10px;
                vertical-align: middle;
                text-decoration: line-through;
              }
              .sell_price{
                display: flex;
                justify-content: center;
                float: right;
                width: 70px;
                height: 18px;
                line-height: 12px;
                padding: 3px;
                color: #fff;
                font-size: 10px;
                background-color: #fa5956;
              }
            }
      }
      .swiper-pagination{
          display: flex;
          align-items: center;
      }
  }
}
</style>
